<!-- 列表形式2（有图） -->
<template>
  <div class="list-template">
    <div class="container-wrapper">
      <div class="waterfall-container">
        <div>
          <div v-for="(item, index) in listOdd" :key="item.id" class="card" :style="getCardStyle(index, 'left')">
            <div v-if="item.imageUrl" class="image-container">
              <img :src="item.imageUrl" class="card-img" />
            </div>
            <div>{{ item.createTime }}</div>
            <div class="card-title">{{ item.title }}</div>
            <div class="card-content">{{ item.textContent }}</div>
          </div>
        </div>
        <div class="column-right">
          <div v-for="(item, index) in listEven" :key="item.id" class="card" :style="getCardStyle(index, 'right')">
            <div v-if="item.imageUrl" class="image-container">
              <img :src="item.imageUrl" class="card-img" />
            </div>
            <div>{{ item.createTime }}</div>
            <div class="card-title">{{ item.title }}</div>
            <div class="card-content">{{ item.textContent }}</div>
          </div>
        </div>
      </div>
    </div>

    <div class="pagination">
      <button v-if="pageSize > 1" @click="changePage(pageSize - 1)" class="page-button">
        ←
      </button>
      <button v-for="i in pageNum" :key="i.index" @click="changePage(i.index)" :class="['page-button', { active: i.active }]">
        {{ i.index }}
      </button>
      <button v-if="pageSize < totalPages" @click="changePage(pageSize + 1)" class="page-button">
        →
      </button>
    </div>
  </div>
</template>
  
  <script setup lang="ts">
import { ref, computed, watch, onMounted } from 'vue'

interface ContentItem {
	id: string
	imageUrl?: string
	createTime: string
	title: string
	content: string
	textContent?: string
}

interface PageItem {
	index: number
	active: boolean
}

const props = defineProps<{
	contentArr: ContentItem[]
}>()

const listOdd = ref<ContentItem[]>([])
const listEven = ref<ContentItem[]>([])
const scrollIndex = ref(0)
const scrollDistance = ref(0)
const pageSize = ref(1)

const totalPages = computed(() => Math.ceil(props.contentArr.length / 10))
const pageNum = computed<PageItem[]>(() =>
	Array.from({ length: totalPages.value }, (_, i) => ({
		index: i + 1,
		active: i + 1 === pageSize.value
	}))
)

const init = () => {
	getContentList()
}

const getContentList = () => {
	const startIndex = (pageSize.value - 1) * 10
	const endIndex = pageSize.value * 10
	const currentPageItems = props.contentArr.slice(startIndex, endIndex)

	listOdd.value = []
	listEven.value = []

	currentPageItems.forEach((item, index) => {
		const processedItem = {
			...item,
			textContent: new DOMParser().parseFromString(item.content, 'text/html').body.textContent || ''
		}

		if (index % 2 === 0) {
			listOdd.value.push(processedItem)
		} else {
			listEven.value.push(processedItem)
		}
	})
}

const changePage = (index: number) => {
	if (index < 1 || index > totalPages.value) return
	pageSize.value = index
	getContentList()
}

const getCardStyle = (index: number, direction: 'left' | 'right') => {
	if (index <= scrollIndex.value) {
		return { transform: 'translateX(0)', opacity: 1 }
	}
	return {
		transform: direction === 'left' ? 'translateX(-100%)' : 'translateX(100%)',
		opacity: 0
	}
}

const handleScroll = (event: Event) => {
	const target = event.target as HTMLElement
	if (scrollDistance.value > target.scrollTop) {
		if (target.scrollTop <= (window.innerHeight / 2) * scrollIndex.value && scrollIndex.value > 0) {
			scrollIndex.value--
		}
	} else {
		if (target.scrollTop >= (window.innerHeight / 2) * (scrollIndex.value + 1)) {
			scrollIndex.value++
		}
	}
	scrollDistance.value = target.scrollTop
}

watch(() => props.contentArr, init)
onMounted(() => {
	init()
})
defineExpose({
  handleScroll
})
</script>
  
  <style lang="scss" scoped>
.list-template {
	width: 100vw;
	margin: 5vh 0;
	position: relative;
}

.container-wrapper {
	width: 100%;
	display: flex;
	justify-content: center;
	position: relative;
	z-index: 2;
}

.waterfall-container {
	width: 90vw;
	min-height: 70vh;
	display: flex;
	justify-content: space-around;
}

.column-right {
	margin-top: 10vh;
}

.card {
	cursor: pointer;
	width: 35vw;
	margin-bottom: 12vh;
	padding: 20px;
	color: #696969;
	border: 1px solid #fff;
	transition: 0.5s;
	opacity: 0;
	background-color: #fbfbfe;
	line-height: 2;

	&:hover {
		border: 1px solid #cbd0ff;
		box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);

		.card-img {
			transform: scale(1.5);
		}
	}
}

.image-container {
	overflow: hidden;
}

.card-img {
	width: 100%;
	height: auto;
	max-height: 30vh;
	object-fit: cover;
	transition: 0.5s;
}

.card-title {
	font-size: 3vh;
	font-weight: bold;
	color: #000;
	max-width: 38vw;
}

.card-content {
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	white-space: normal;
	max-width: 38vw;
}

.pagination {
	margin-top: 10vh;
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
	z-index: 2;
}

.page-button {
	width: 5vh;
	height: 5vh;
	border-radius: 5vh;
	margin: 1vh;
	padding: 1vh;
	color: #28245e;
	border: 1px solid #28245e;
	background-color: #fff;
	font-weight: bold;
	cursor: pointer;

	&.active {
		background-color: #28245e;
		color: #fff;
	}

	&:hover {
		background-color: #28245e;
		color: #fff;
	}
}
</style>